<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head th:include="head :: head">
    <title>基本地图展示</title>
    <script src="../static/jquery-3.2.1.min.js"></script>
    <link href="../static/bootstrap.min.css" rel="stylesheet" th:href="@{/bootstrap.min.css}"/>
    <script src="../static/bootstrap.min.js" th:src="@{/bootstrap.min.js}"></script>
    <script type="text/javascript" src="../static/basic.js"></script>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
    <script src="http://webapi.amap.com/maps?v=1.4.0&amp;key=32d4df4014de7fdd92b6bfa424d7c62f"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 main" >
    <div class="row">
        <div class="col-xs-3 col-sm-3 col-md-5 col-lg-6">
            <div id="button-group" class="js_content">
                <input type="button" class="button" value="显示消防设备" id="addMarker"/>
                <input type="button" class="button" value="更新点标记覆盖物" id="updateMarker"/>
                <input type="button" class="button" value="删除点标记覆盖物" id="clearMarker"/>
            </div>
        </div>
        <div class="col-xs-9 col-sm-9 col-md-7 col-lg-6">
                <div id="container" class="row1height"></div>
        </div>
    </div>
<!--<div class="button-group">-->
    <!--<input type="button" class="button" value="显示消防设备" id="addMarker"/>-->
    <!--<input type="button" class="button" value="更新点标记覆盖物" id="updateMarker"/>-->
    <!--<input type="button" class="button" value="删除点标记覆盖物" id="clearMarker"/>-->
<!--</div>-->


</div>
<script th:inline="javascript">
    /*<![CDATA[*/

    var basePath = /*[[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]]*/ "file:///D:/workspace/IdeaProjects/springcloudexmple/fire_loaction/src/main/resources/templates/index.html:";

    var map;
    map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: 11,
        center: [116.397428, 39.90923]
    });

    //地图绘制完调用事件
    var clickEventListener = map.on('complete', function(e) {
         height = map.getSize( );

         alert(height);
    });
    function getWindowsHeight() {
        return $(document.body).height();

    }

    function setHeight() {
        var height = getWindowsHeight();
        $(".row1height").css("height", height);
    }
    setHeight();
    var markers = [];
    var positions = /*[[${location}]]*/ [[116.405467, 39.907761], [116.415467, 39.907761], [116.415467, 39.917761], [116.425467, 39.907761], [116.385467, 39.907761]];


    map.on('click', function (e) {
        alert('您在[ ' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ' ]的位置点击了地图！');
        marker = new AMap.Marker({
            map: map,
            position: [e.lnglat.getLng(), e.lnglat.getLat()]
        });
        /*[+$.getJSON(''+basePath+'/insertLocal', {"lng": e.lnglat.getLng(),"lat":e.lnglat.getLat()}, function (result) {debugger;
         if(result){
         alert("存入成功");
         }
         });+]*/
    });

    for (var i = 0, marker; i < positions.length; i++) {
        marker = new AMap.Marker({
            map: map,
            position: positions[i]
        });
        markers.push(marker);
    }

     alert(/*[[${location}]]*/);
    /*]]>*/
</script>

</body>
</html>